<template>
  <div>
    <puplic-modal
      width="1000"
      :publicVisible="publicVisible"
      modalStyle="addEditSupportModal"
      @cancel="publicVisible = false"
      @handleOk="handleOk"
      :title="title"
    >
      <div slot="content" class="content">
        <div class="search-group">
          <div class="input-wrap" style="width: 40%">
            <div class="label">名称:</div>
            <div class="input-item" style="width: 100%">
              <a-input :maxLength="30" clearable v-model="queryParam.articleNo" placeholder="请输入名称" />
            </div>
          </div>
        </div>

        <div class="search-group">
          <div class="input-wrap" style="width: 40%">
            <div class="label">排序值:</div>
            <div class="input-item" style="width: 100%">
              <a-input
                :maxLength="3"
                clearable
                v-model="queryParam.regulationsOrder"
                placeholder="请输入排序值，不支持小数"
              />
            </div>
          </div>
          <span style="color: #2877c5">值越小在界面显示越靠前</span>
        </div>

        <u-editor
          class="mt-10"
          styleStr="width: 100%; height: 100%"
          :message="message"
          @change="contentChange"
        ></u-editor>
      </div>
    </puplic-modal>
  </div>
</template>
<script>
import puplicModal from '@/components/publicModal'
import UEditor from '@/components/UEditor2'
import { lawArticleAdd, lawArticleEdit, } from '@/api/law'
export default {
  components: { puplicModal, UEditor },
  name: 'addEditSupportModal',
  data () {
    return {
      title: '新增条文',
      publicVisible: false,
      message: '',
      msgContent: '',
      records: {},
      queryParam: {
        articleNo: '',
        regulationsOrder: ''
      },
    }
  },
  methods: {
    show (records) {
      console.log(records, 'records')
      this.records = records
      if (records && records.id) {
        this.title = '编辑条文'
        this.message = records.articleContent
        this.queryParam.articleNo = records.articleNo
        this.queryParam.regulationsOrder = records.regulationsOrder
      } else {
        this.title = '新增条文'
        this.message = ''
        this.queryParam.articleNo = ''
        this.queryParam.regulationsOrder = ''
      }
      this.publicVisible = true
    },

    async handleOk () {
      if (this.queryParam.articleNo == '') {
        this.$message.warn('请输入名称')
        return
      }

      if (this.queryParam.regulationsOrder == '') {
        this.$message.warn('请输入排序值')
        return
      }
      let reg = /^(0|\+?[1-9][0-9]{0,2})$/
      if (reg.test(this.queryParam.regulationsOrder) == false) {
        this.$message.warn('排序值只支持输入小于等于三位的正整数')
        return
      }
      if (this.msgContent == '') {
        this.$message.warn('请上传内容')
        return
      }

      let data = {
        regulationsId: this.records.regulationsId,
        articleNo: this.queryParam.articleNo,
        regulationsOrder: this.queryParam.regulationsOrder,
        articleContent: this.msgContent
      }

      if (this.title == '新增条文') {
        let res = await lawArticleAdd(data)
        this.$message.success(res.message)
        this.publicVisible = false
        this.$emit('refresh')
      } else {
        data.id = this.records.id
        let res = await lawArticleEdit(data)
        this.$message.success(res.message)
        this.publicVisible = false
        this.$emit('refresh')
      }
    },

    contentChange (value) {
      this.msgContent = value
    },
  },
}
</script>
<style scoped lang="less">
@import '~@/assets/less/common.less';
.ant-upload.ant-upload-select-picture-card,
.ant-upload {
  background: #104c8a;
  border-color: #104c8a;
}
.addEditSupportModal {
  .content {
    padding: 20px 20px 10px 20px !important;
  }
  .mt-10 {
    margin-top: 10px;
  }
  .items {
    margin-bottom: 10px;
    .label {
      display: inline-block;
      vertical-align: middle;
      width: 50px;
    }
    .value {
      display: inline-block;
      vertical-align: middle;
      width: calc(100% - 70px);
    }
  }
  .uploadImg {
    .label {
      vertical-align: top;
    }
    .value {
      vertical-align: top;
    }
  }
  .search-group {
    padding: 0;
  }
}
</style>
